<template>
  <div :class="$style.container" ref="video">

  </div>
</template>
<script>
import Player from 'xgplayer';
import 'xgplayer-mp4';
export default {
  props: {
    url:{
      type: String,
      required: true
    },
    width: {
      type:String,
      default: '600px'
    },
    height: {
      type: String,
      default: '400px'
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    poster: {
      type: String,
      default: ''
    },
    pip: {
      type: Boolean,
      default: true
    },
    keyShortcut: {
      type: String,
      default: 'on'
    },
    destory: {
      type:Boolean,
      default: false
    }
  },
  data() {
    return {
      player: ''
    };
  },
  watch: {
    destory (newValue) {
      if (newValue) {
        this.player.destroy()
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.player = new Player({
        el:this.$refs.video,
        url: this.url,
        width: this.width,
        height: this.height,
        autoplay: this.autoplay,
        poster: this.poster,
        playbackRate: [0.5, 0.75, 1, 1.5, 2],
        pip: this.pip,// 画中画
        keyShortcut: this.keyShortcut
      });
    }
  }
};
</script> 
<style lang="scss" module>
.container {
 
}
</style>